<template>
  <div class="sys-role-table">
    <el-table :data="data">
      <el-table-column
        label="序号"
        prop="rowNumber"
        align="center"
        width="100"
      />
      <el-table-column
        label="角色名称"
        prop="name"
        align="left"
        :show-overflow-tooltip="true"
        min-width="30%"
      />
      <!--<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true"/>-->
      <el-table-column
        label="是否禁用"
        prop="isDisabled"
        align="center"
        min-width="10%"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
        min-width="30%"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding"
        min-width="30%"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdate(scope.row)" v-hasPermi="['sys:role:update']">
            修改
          </el-button>
          <el-button type="text" @click="handleLayer(scope.row)" v-hasPermi="['sys:role:update']">
            地图图层
          </el-button>
          <el-button type="text" @click="handleDelete(scope.row)" v-hasPermi="['sys:role:remove']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'SysRoleTable',
  props: {
    data: { type: Array, default: () => [] }
  },
  methods: {
    handleUpdate(row) {
      this.$emit('row-update', row)
    },
    handleLayer(row) {
      this.$emit('row-layer', row)
    },
    handleDelete(row) {
      this.$emit('row-delete', row)
    },
  }
}
</script>

<style lang="scss" scoped>
.sys-role-table {

}
</style>
